<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="log-search">
            <a-row>
                <a-form-item :style="{float: 'left', marginRight: '10px'}">
                    <a-select
                        v-decorator="['user_id']"
                        placeholder="操作账号"
                        >
                        <a-select-option v-for="v in users" :key="v.id" :value="v.id">
                            {{v.username}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :style="{float: 'left', marginRight: '10px'}">
                    <a-range-picker
                        :showTime="{ format: 'HH:mm:ss' }"
                        format="YYYY-MM-DD HH:mm:ss"
                        v-decorator="['created_at']"
                        :placeholder="['开始时间', '结束时间']"
                    />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit">筛选</a-button>
                </a-form-item>
            </a-row>
        </a-form>
        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered></a-table>
    </div>

</template>


<script>
    import moment from 'moment';

    export default {
        data() {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                tableData: [],
                users: [],
                search: {},
                columns: [
                    {title: 'ID', dataIndex: 'id', align: 'center', width: '10%'},
                    {title: '日志编号', dataIndex: 'sn', align: 'center', width: '20%'},
                    {title: '操作人', dataIndex: 'username', align: 'center', width: '15%'},
                    {title: '添加时间', dataIndex: 'created_at', align: 'center', width: '20%'},
                    {title: 'IP', dataIndex: 'ip', align: 'center', width: '15%'},
                    {title: '操作', dataIndex: 'operation', align: 'center', width: '20%'},
                ],
                form: this.$form.createForm(this),
            };
        },

        mounted() {
            this.getList();
            this.http("get", "user/index", {page_size: 100}).then(res => {
                this.users = res.data
            })
        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};
                let data = await this.http(
                    "get",
                    "log/index",
                    Object.assign(req, param)
                );
                this.tableData = data.data;
                this.pagination.total = data.total_count;
            },
            onSubmit() {//搜索提交
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.pagination.current = 1
                        if (values.user_id) {
                            this.search.user_id = values.user_id
                        } else {
                            this.search.user_id = ''
                        }
                        if (values.created_at && values.created_at.length !== 0) {
                            this.search.created_at = [values.created_at[0].format('YYYY-MM-DD HH:mm:ss'), values.created_at[1].format('YYYY-MM-DD HH:mm:ss')]
                        } else {
                            this.search.created_at = []
                        }
                        this.getList(this.search);
                    }
                })
            },
            handleChange(page, size) {
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList(this.search);
            },

        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    #log-search {
        .ant-select {
            width: 160px;
        }
    }
</style>
